// 模块之间可以互相依赖
import toast from './toast'

class Table{
    constructor(ops){
        this.btn = ops.btn;
        this.cont = ops.cont;
        // this.alert = ops.alert;
        this.addEvent();
    }
    addEvent(){
        const that = this;
        // 遍历所有li
        // for(let i=0;i<this.btn.length;i++){
            // i可以直接使用
        // }
        this.btn.forEach((val,idx)=>{
            // 拿到每个li绑定事件
            val.onclick = function(){
                // 取消所有li的class
                for(let j=0;j<that.btn.length;j++){
                    that.btn[j].className = "";
                }
                // 给当前li添加class
                this.className = "active";
                // 改变内容时将按钮的索引传进去
                that.change(idx);
            }
        })

        this.cont.forEach(val=>{
            val.onclick = function(){
                // new that.alert(val.innerHTML)
                new toast(val.innerHTML)
            }
        })
    }
    change(i){
        // 隐藏所有
        for(let j=0;j<this.cont.length;j++){
            this.cont[j].style.display = "none";
        }
        // 显示对应按钮索引的内容
        this.cont[i].style.display = "block";
    }
}

export default Table;

